<template>
  <div style="margin-top: 20px; border-radius: 4px; padding: 8px;margin-bottom: 20px; border:1.5px solid #dddddd;">

    <div v-if="chooseTags.length <= 0" style="color: #999999;font-size: 14px;font-weight: 500;">请从下方选择标签...</div>
    <el-tag class="tag" :type="(tag.type == '3') ? 'info' : 'primary'" @click="chooseTag(tag, false)"
      v-for="tag in chooseTags" :key="tag.tagkey" effect="dark" round>
      {{ tag.name }}
    </el-tag>
  </div>
  <div v-loading="loadingFlag" class="systag"
    style="background-color: var(--el-farms-win-bg-color);border-radius: 8px; padding: 10px; border:1px dashed var(--el-menu-active-color)">
    <el-input v-model="searchKey" @keyup.enter="searchTag" style="width: 100%; margin-bottom:16px;margin-top: 10px;"
      placeholder="可选标签" class="input-with-select">
      <template #prepend>
        <el-button @click="searchTag()" icon="Search" />
      </template>
      <template #append>
        <el-button @click="clearTag()" icon="Delete" />
      </template>
    </el-input>
    <el-tag class="tag" @click="chooseTag(tag, true)" v-for="tag in tags" :key="tag.tagkey"
      :type="(tag.type == '3') ? 'info' : 'primary'" effect="plain" round>
      {{ tag.name }}
    </el-tag>
  </div>

</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import farm2Request from '@/service/remoteRequests/Farm2Request';
import notice from '@/components/msg/FarmNotice';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import type { DataResponse } from '@/types/commons/DataResponse';
import type { SkcTag } from '@/types/knows/SkcTag';

//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const searchKey = ref('');
const loadingFlag = ref(false);//加载中遮罩
const tags = reactive([]) as Array<SkcTag>;
const chooseTags = reactive([]) as Array<SkcTag>;

const props = defineProps({
  knowTags: {
    type: Array as () => SkcTag[], // 指定类型为 SkcTag 数组
    required: true,                // 必填
    default: () => []              // 默认值为空数组
  }
});



const searchTag = () => {
  loadSysTags(searchKey.value);
}
const clearTag = () => {
  searchKey.value = '';
  loadSysTags('');
}
const chooseTag = (tag: SkcTag, isChoose: boolean) => {
  if (isChoose) {
    delTagToChoose(tag);
    chooseTags.push(tag);
  } else {
    delTagToChoose(tag)
  }
}


const delTagToChoose = (tag: SkcTag) => {
  const index = chooseTags.findIndex(t => t.tagkey === tag.tagkey); // 假设 SkcTag 有一个唯一的 id 属性
  if (index !== -1) {
    chooseTags.splice(index, 1); // 移除一个元素
  }
}


/**
 * 加载系统可用标签
 */
const loadSysTags = (word?: string) => {
  farm2Request.submit('api/wtag/search', RequestTypeEnum.post, loadingFlag, { key: word }).then((response: DataResponse) => {
    const thetags = (response.data) as [SkcTag];
    tags.length = 0;
    Object.assign(tags, thetags);
  }).catch((msg: string) => {
    notice.byError(msg);//报错
  });
}
loadSysTags();
const getTags = () => {
  return chooseTags
};

onMounted(() => {
  Object.assign(chooseTags, props.knowTags);
});

// 暴露方法给父组件
defineExpose({
  getTags
});
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
</script>
<style scoped>
/* 样式可以根据需要添加 */
.tag {
  margin: 4px;
  cursor: pointer;
}
</style>
